<template>
  <el-dialog
    :title="title"
    v-model="open"
    width="800px"
    append-to-body
    destroy-on-close
  >
    <el-form ref="formRef" :model="form" label-width="120px">
      <!-- 第一行 -->
      <el-divider content-position="left">方案信息</el-divider>
      <el-row>
        <el-form-item label="方案名称" prop="name">
          {{ form.name }}
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="方案内容" prop="content">
          {{ form.content }}
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="灌区名称" prop="irriId"> 万北灌区 </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="计划用水量" prop="totalWater">
          {{ form.totalWater }}
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="实际用水量" prop="totalActualWater">
          {{ form.totalActualWater }}
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="时长" prop="totalTime">
          {{ form.totalTime }}
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="方案类型" prop="planType">
          {{ getTypeName(form.planType) }}
        </el-form-item>
      </el-row>

      <!-- 第二行 -->
      <el-divider content-position="left">详细设计</el-divider>
      <el-row>
        <el-table
          style="width: 100%; height: 300px"
          :data="form.patternPlanDataList"
          stripe
          border
        >
          <el-table-column label="区域名称" prop="landName" />
          <el-table-column label="内容" prop="content" />
          <el-table-column label="需水量" prop="demand" />
          <el-table-column label="设计流量(m3/s)" prop="flowCapacity" />
          <el-table-column label="配水流量(h)" prop="allocFlow" />
          <el-table-column label="开始时间(h)" prop="startTime" />
          <el-table-column label="结束时间(h)" prop="endTime" />
        </el-table>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="open = false">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue"; // 添加这行导入
const open = ref(false);
const title = ref("");
const form = ref({});
const formRef = ref();

const getTypeName = (type) => {
  //0 需水模型 1 水资源分配 2 输水模型
  return type === 0 ? "需水模型" : type === 1 ? "水资源分配" : "输水模型";
};

let openDialog = (faData, dialogTitle) => {
  open.value = true;
  title.value = dialogTitle;
  form.value = faData;
};
defineExpose({
  openDialog,
});
</script>
